/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-08-02 17:32:35
 */
<template>
      <div class="relationCon"  id="stellRelation"></div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      myChart: null
    };
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value(res) {
      this.fetchChart(res);
    }
  },
  mounted() {
    // this.fetchChart();
  },
  methods: {
    fetchChart(res) {
      var dataArr = [];
      var a = 0.5;
      var b = 1.3;
      var c = 2.1;
      var xyArr = [
        { x: 0, y: a },
        { x: 0, y: b },
        { x: 0, y: c },
        { x: 1, y: a },
        { x: 1, y: b },
        { x: 1, y: c },
        { x: 2, y: a },
        { x: 2, y: b },
        { x: 3, y: a },
        { x: 3, y: b },
        { x: 4, y: a },
        { x: 4, y: b },
        { x: 4, y: c },
        { x: 5, y: a },
        { x: 5, y: b },
        { x: 5, y: c },
        { x: 6, y: a },
        { x: 6, y: b },
        { x: 6, y: c }
      ];
      res.forEach((item, id) => {
        var obj = {
          name: item.deliveryArea,
          value: item.totalWeight,
          x: xyArr[id] ? xyArr[id].x : 0,
          y: xyArr[id] ? xyArr[id].y : 0,
          symbolOffset: [0, 5]
        };
        dataArr.push(obj);
      });
      var option = {
        animationDurationUpdate: 1500,
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 16
            }
          }
        },
        series: [
          {
            type: "graph",
            // layout: "force",
            symbolSize: 65,
            itemStyle: {
              normal: {
                color: "#02584B"
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  var item1 =
                    "{c|" +
                    params.name +
                    "}" +
                    "\n" +
                    "{b|" +
                    params.value +
                    "}";
                  var item2 =
                    "{a|" +
                    params.name +
                    "}" +
                    "\n" +
                    "{b|" +
                    params.value +
                    "}";
                  if (params.name.length > 3) {
                    return item1;
                  } else {
                    return item2;
                  }
                },
                rich: {
                  a: {
                    fontSize: 14,
                    color: "#f0bd26",
                    align: "center",
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 19,
                    color: "#f0bd26",
                    lineHeight: 20,
                    align: "center",
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    fontSize: 14,
                    color: "#f0bd26",
                    align: "center",
                    lineHeight: 20
                  }
                },
                textStyle: {
                  color: "#f0bd26"
                }
              }
            },
            force: {
              repulsion: 70
            },
            edgeLabel: {
              normal: {
                show: false,
                textStyle: {
                  fontSize: 14
                },
                formatter: "{c}"
              }
            },
            data: dataArr,
            lineStyle: {
              normal: {
                color: "transparent",
                width: 0
              }
            }
          }
        ]
      };
      var self = this;
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.dispose();
      }
      setTimeout(() => {
        self.myChart = echarts.init(document.getElementById("stellRelation"));
        self.myChart.setOption(option);
      }, 100);
    }
  }
};
</script>
<style scoped>
.relationCon {
  position: absolute;
  top: -130px;
  height: 460px;
  min-width: 580px;
}
</style>
